<template>
	<view class="box-sidebar-button">
		<view
			class="box-sidebar-button-box"
			v-if="boxSidebarButtonBox">
			<view
				class="_for"
				v-for="button in item.buttonList"
				:style="'background-color:'+button.backgroundColor+';'"
				@click="clickSubButton(button.url)">
				<text
					:class="'iconfont '+button.textIcon"
					:style="'color:'+button.color+';'"></text>
				<text
					class="_text"
					:style="'color:'+button.color+';'">{{button.text}}</text>
			</view>
		</view>
		<view
			class="_button"
			@click="clickButton"
			:style="item.leftOrRight+'background:'+item.buttonBackgroundColor+';'">
			<text :class="boxSidebarButtonBox?'iconfont '+item.buttonHoverText:'iconfont '+item.buttonText" :style="'color:'+item.buttonColor+';'"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-sidebar-button",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				boxSidebarButtonBox:false
			};
		},
		mounted(){},
		methods:{
			clickButton(){
				if(this.item.buttonList.length){
					this.boxSidebarButtonBox = !this.boxSidebarButtonBox;
				}else{
					this.$_to(this.item.buttonUrl)
				}
			},
			clickSubButton(url){
				this.boxSidebarButtonBox = !this.boxSidebarButtonBox;
				this.$_to(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box-sidebar-button{
	._button{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: $red;
		line-height: 45rpx;
		position: fixed;
		z-index: 999;
		bottom: var(--window-bottom);
		margin-bottom: 25rpx;
		text{
			font-size: 45rpx;
			color: #FFF;
		}
	}
	.box-sidebar-button-box{
		width: 700rpx;
		position: fixed;
		z-index: 999;
		left: 25rpx;
		bottom: var(--window-bottom);
		margin-bottom: 130rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		animation: bounceChild 0.5s 1 ease-in-out;
		._for{
			margin: 25rpx 12.5rpx 0 12.5rpx;
			width: 110rpx;
			height: 110rpx;
			background: #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			border-radius: 10rpx;
			.iconfont{
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 60rpx;
				font-size: 60rpx;
			}
			._text{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
				line-height: 18rpx;
				padding-top: 5rpx;
			}
		}
	}
}
@keyframes bounceChild {  
	0% {
		opacity: 0;
	}
	25%{
		opacity: .25;
	}
	50% {
		opacity: .5;
	}
	75%{
		opacity: .75;
	}
	100% {
		opacity: 1;
	}
}
</style>